<template>
  <div>
    <v-nav :current="'7'" @EnData="EnData" @ChData="ChData"></v-nav>
    <div class="banner-s">
      <img src="@/assets/banner4.jpg" alt="" style="width: 100%;border: 0">
      <!-- <p>一家致力于创新药、高端仿制药、高端制剂以及中成药研发的高新技术企业</p> -->
    </div>
    <div class="title">
      <h1>{{title}}</h1>
    </div>
    <div style="width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;margin-bottom: 66px">
      <el-amap vid="amapDemo" class="amap-demo" :center="center" :zoom="zoom" :lang="chooseLang">
        <el-amap-info-window :position="mywindow.position" :content="mywindow.content" :visible="mywindow.visible" :events="mywindow.events"></el-amap-info-window>
        <el-amap-marker :position="markercu.position" :key="markercu.id"></el-amap-marker>
      </el-amap>
      <div>
        <div class="items" style="height: 500px;overflow-y: scroll">
          <div class="item" @mouseenter="address(marker)" v-for="marker in lists" :key="marker.id">
            <h1>{{marker.post_title}}</h1>
            <div>
              <img src="@/assets/lianxi/1.png" alt="">
              <span>{{footList.lianxiList[2]}}：{{marker.post_phone}}</span>
            </div>
            <div>
              <img src="@/assets/lianxi/2.png" alt="">
              <span>{{footList.lianxiList[3]}}：{{marker.post_excerpt}}</span>
            </div>
            <div>
              <img src="@/assets/lianxi/3.png" alt="">
              <span>{{footList.lianxiList[4]}}：{{marker.post_dizhi}}</span>
            </div>
          </div>
        </div>
        <!-- <div style="display:flex;justify-content: center;margin-top: 34px;margin-bottom: 66px;width: 486px;float: right">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="2"
            @current-change="handleCurrentChanges"
            >
          </el-pagination>
        </div> -->
      </div>
    </div>
    <vFooter></vFooter>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import vNav from '@/components/nav.vue'
import vFooter from '@/components/footer.vue'
import { getChatUsData } from '@/services/api.js'
import { getChatUsDataEn } from '@/services/api_en.js'
export default {
  name: 'lianxi',
  data () {
    return {
      title: null,
      current: 7,
      zoom: 9,
      total: null,
      page: 1,
      center: [104.06522, 30.544668],
      lists: [],
      markercu: {
        id: 1,
        position: []
      },
      mywindow: {
        position: [],
        content: '',
        visible: true,
        events: {
          close () {
            this.mywindow.visible = false
          }
        }
      },
      chooseLang: 'zh_cn'
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'footList': 'footList'
    })
  },
  components: {
    vNav,
    vFooter
  },
  methods: {
    address (current) {
      console.log(current)
      this.markercu = current
      this.center = current.position
      this.mywindow.position = current.position
      this.mywindow.content = current.content
    },
    _getChList (sw, page) {
      this.lists = []
      this.title = '联系我们'
      let params = {
        num: 100
      }
      getChatUsData(params).then((res) => {
        console.log('进入1')
        console.log(res)
        this.total = res.total
        this.lists = res.data
        let aa = this.lists[0].post_title
        let bb = this.lists[0].post_dizhi
        this.markercu = {
          id: this.lists[0].id,
          position: this.lists[0].position
        }
        this.center = this.lists[0].position
        this.mywindow.position = this.lists[0].position
        this.mywindow.content = `<h4>${aa}</h4><div class="text item">${bb}</div>`
        // this.lists[0].position = [104.06522, 30.544668]
        // this.lists[1].position = [103.987457, 30.761592]
        // this.lists[0].content = `<h4>${aa}</h4><div class="text item">${bb}</div>`
        // this.lists[1].content = `<h4>${aa}</h4><div class="text item">天府三街</div>`
      })
      // let aa = '成都倍特药业有限公司11'
      // let bb = '金牛区'
      // this.lists = [
      //   {
      //     id: 1,
      //     position: [104.06522, 30.544668],
      //     content: `<h4>${aa}</h4><div class="text item">${bb}</div>`
      //   },
      //   {
      //     id: 2,
      //     position: [103.987457, 30.761592],
      //     content: `<h4>${aa}</h4><div class="text item">天府三街</div>`
      //   }
      // ]
      // this.markercu = {
      //   id: 1,
      //   position: [104.06522, 30.544668]
      // }
      // this.mywindow.position = [104.06522, 30.544668]
      // this.mywindow.content = `<h4>${aa}</h4><div class="text item">天府三街</div>`
    },
    _getEnList () {
      this.lists = []
      this.title = 'Contact Us'
      let params = {
        num: 100
      }
      getChatUsDataEn(params).then((res) => {
        console.log('进入2')
        console.log(res)
        this.total = res.total
        this.lists = res.data
        let aa = this.lists[0].post_title
        let bb = this.lists[0].post_dizhi
        this.markercu = {
          id: this.lists[0].id,
          position: this.lists[0].position
        }
        this.center = this.lists[0].position
        this.mywindow.position = this.lists[0].position
        this.mywindow.content = `<h4>${aa}</h4><div class="text item">${bb}</div>`
      })
    },
    version () {
      if (this.lang === 1) {
        this._getChList()
        this.chooseLang = 'zh_cn'
      }
      if (this.lang === 2) {
        this.lists = []
        this.title = 'Contact Us'
        this.chooseLang = 'en'
        let params = {
          num: 100
        }
        getChatUsDataEn(params).then((res) => {
          console.log('进入2')
          console.log(res)
          this.total = res.total
          this.lists = res.data
          let aa = this.lists[0].post_title
          let bb = this.lists[0].post_dizhi
          this.markercu = {
            id: this.lists[0].id,
            position: this.lists[0].position
          }
          this.center = this.lists[0].position
          this.mywindow.position = this.lists[0].position
          this.mywindow.content = `<h4>${aa}</h4><div class="text item">${bb}</div>`
        })
      }
    },
    // handleCurrentChanges  (val) {
    //   this.page = val
    //   console.log(this.page)
    //   this.version()
    // },
    EnData (res) {
      this._getEnList()
      this.chooseLang = 'en'
    },
    ChData (res) {
      this._getChList()
      this.chooseLang = 'zh_cn'
    }
  },
  created () {
    this.version()
    window.scrollTo(0, 0)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.amap-demo {
  height: 500px;
  width: 667px;
  // margin: 0 auto
}
.title {
  width: 1200px;
  margin: 0 auto;
  margin-top: 60px;
  margin-bottom: 83px;
  h1 {
    font-size: 32px;
    line-height: 48px;
    letter-spacing: 3px;
    color: #333333;
  }
}
.items {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  width: 533px;
  // height: 369px;
  // margin: 0 auto;
  // margin-bottom: 66px;
  .item {
    width: 486px;
    // height: 200px;
    background-color: #f5f5f5;
    margin-bottom: 26px;
    h1 {
      font-size: 18px;
      color: #2053b9;
      margin-bottom: 30px;
      padding-top: 23px;
      padding-left: 27px;
    }
    div {
      padding-left: 27px;
      margin-bottom: 16px
    }
    img {
      margin-right: 22px
    }
    span {
      font-size: 14px;
      color: #333333;
    }
  }
}
</style>
